<template>
	<u-popup :show="show" @close="close"  mode="right">
		<view style="height: 100%;display: flex;flex-direction: column;width: 100vw;">
			<u-navbar title="评价" @leftClick="close" :placeholder="true" border />
			<view style="flex: 1;">
				<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query" :default-page-no="1"
					:default-page-size="10">
					<view class="appraise" v-for="item in data" :key="item.id">
						<view>
							<view>
								<u-avatar :src="item.user.avatar" size="80rpx"></u-avatar>
								<text style="margin-left: 10rpx;">{{item.user.nick_name}}</text>
							</view>
							<text>{{item.updated_at | changeTime}}</text>
						</view>
						<view>
							<view>
								{{item.content}}
							</view>
				
							<view style="margin: 10rpx 0;" v-if="item.photos.length">
								<u-album :urls="item.photos" keyName="url"></u-album>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: ['show', 'p_id'],
		data() {
			return {
				data: []
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			query(pageNo, pageSize) {
				let sendData = {
					page: pageNo,
					size: pageSize,
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Appraise.List('product', this.p_id, sendData).then(res => {
					this.$refs.paging.complete(res.data.appraises.data)
					this.$emit('appraiseLoadingChange')
					let arr
					if(this.data.length){
					arr=this.data.filter((item,index)=>index<5)
					}else{
					arr=res.data.appraises.data.filter((item,index)=>index<5)
					}
					this.$emit('getAppraise',arr)
					uni.hideLoading()
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.appraise {
		font-size: 26rpx;
		margin: 0 20rpx;
		padding-top: 10rpx;

		>view:first-child {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>view {
				display: flex;
				align-items: center;
			}
		}

		>view:last-child {
			padding: 10rpx 0;
			margin-left: 90rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}
	}
</style>